<template>
  <Header :logo1="homeConfig.logo" :tel="homeConfig.contactPhone" />
  <div class="home-container">
    <router-view v-slot="{ Component }">
      <keep-alive :max="9">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
  <Footer />
</template>
<script lang="ts">
import { getHomeHomeConfig } from "@/api/home";
import { HomeConfig } from "@/api/home/types";
import { HomeConfigStore } from "@/stores/main";
import Header from "./Header.vue";
import Footer from "./Footer.vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: { Header, Footer },
  setup() {
    const homeConfig = ref<HomeConfig>({});
    const homeConfigStore = HomeConfigStore();
    const getHomeConfig = async function () {
      let res = await getHomeHomeConfig();
      homeConfig.value = res.data || {};
      homeConfigStore.value = res.data || {};
    };
    getHomeConfig();
    return {
      homeConfig,
    };
  },
});
</script> 
<style scoped lang="less">
.home-container {
  min-height: 500px;
  span {
    color: red;
  }
}
</style>

